<template>
  <div>
    <template v-for="item in list">
      <template v-if="!item.children || !item.children.length || item.meta?.single">
        <t-menu-item
          :key="item.path"
          v-if="getHref(item)"
          :href="getHref(item)?.[0]"
          :name="item.path"
          :value="item.meta?.single ? item.redirect : item.path"
        >
          <template #icon>
            <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
            <renderFnIcon :item="item" />
          </template>
          {{ item.title }}
        </t-menu-item>
        <t-menu-item
          :key="item.path"
          v-else-if="item.title"
          :name="item.path"
          :value="item.meta?.single ? item.redirect : item.path"
          :to="item.path"
        >
          <!-- :style="{ color: item.meta.right !== false ? '' : '#ccc' }" -->
          <!-- @click.native="noRight(item.meta.right)" -->
          <template #icon>
            <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
            <renderFnIcon :item="item" />
          </template>
          <span>{{ item.title }}</span>
          <!-- <span v-if="item.meta.right !== false">{{ item.title }}</span> -->
          <!-- 无权限时 弹出对话框 -->
          <!-- <span v-else  >{{ item.title }}</span> -->
        </t-menu-item>
      </template>
      <!-- <t-submenu v-else :name="item.path" :value="item.path" :title="rightitem.title" :key="item.path" :disabled="true">
        <template #icon>
          <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
          <renderFnIcon :item="item" />
        </template>
      </t-submenu> -->
      <t-menu-group v-else :title="item.title" :key="item.path">
        <menu-content v-if="item.children" :nav-data="item.children" />
      </t-menu-group>
    </template>
  </div>
</template>

<script lang="jsx">
import Vue from 'vue';

import { prefix } from '@/config/global';
import { getSessionStorage } from '@/utils/storage';

const noRightArr = ['governance', 'report', 'template'];
const getMenuList = (list, routeType, basePath, isRight) => {
  if (!list) {
    return [];
  }
  return (
    list
      .map((item) => {
        const path = basePath ? `${basePath}/${item.path}` : item.path;
        if (isRight === false && path.includes('risk-assessment/')) {
          const newPath = path.split('/');
          if (noRightArr.includes(newPath[2]) && newPath.length >= 3) {
            item.meta = { ...item.meta, right: false };
            // path = '';
          }
        }
        return {
          path,
          title: item.meta?.title,
          icon: item.meta?.icon || '',
          children: getMenuList(item.children, routeType, path, isRight),
          meta: item.meta,
          redirect: item.redirect,
        };
      })
      // eslint-disable-next-line array-callback-return
      .filter((item) => {
        if (routeType === 'business') {
          return item.meta.routeType === 'business' && item.meta && item.meta.hidden !== true;
        }
        if (routeType === 'risk') {
          return item.meta.routeType === 'risk' && item.meta && item.meta.hidden !== true;
        }
        if (routeType === 'system') {
          return item.meta.routeType === 'system' && item.meta && item.meta.hidden !== true;
        }
      })
  );
};

Vue.component('renderFnIcon', {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  // 遵循最小改动的原则，这里仍然使用 createElement
  render(createElement) {
    if (typeof this.item.icon === 'function' || (this.item.icon && typeof this.item.icon.render === 'function')) {
      return createElement(this.item.icon, {
        class: 't-icon',
      });
    }
    return undefined;
  },
});

export default Vue.extend({
  name: 'MenuContent',
  props: {
    navData: Array,
  },
  data() {
    return {
      prefix,
      isRight: false,
      warnMsg: null,
    };
  },
  computed: {
    list() {
      return getMenuList(this.navData, this.routeType, null, this.isRight);
    },
    routeType() {
      if (getSessionStorage('routeType')) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.$store.commit('user/changeRouteType', getSessionStorage('routeType'));
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        // this.$store.state.user.routeType = getSessionStorage('routeType');
      }
      return this.$store.state.user.routeType;
    },
  },
  watch: {
    routeType: {
      handler() {
        getMenuList(this.navData, this.routeType, null, this.isRight);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getHref(item) {
      return item.path.match(/(http|https):\/\/([\w.]+\/?)\S*/);
    },
    noRight(val) {
      if (val !== false) return;
      if (this.warnMsg) {
        this.$message.close(this.warnMsg);
        this.warnMsg = null;
      }
      this.warnMsg = this.$message.warning({ content: this.content, closeBtn: this.closeBtn, icon: this.icon });
    },
    content() {
      return (
        <div style="width:280px; padding:5px">
          <h3 style="margin-bottom:8px"> 当前为试用账户，无法使用此功能。</h3>
          <p>升级正式版可以解锁风险评估所以功能，请确认是否申请账户？</p>
          <span style="float:right;margin-top:10px">
            <t-button theme="default" style="margin-right:10px" onClick={this.closeMsgDia}>
              取消
            </t-button>
            <t-button onClick={this.openApplyDia}>确认升级</t-button>
          </span>
        </div>
      );
    },
    icon() {
      return (
        <svg
          fill="none"
          viewBox="0 0 16 16"
          width="1em"
          height="1em"
          class="t-icon t-icon-check-circle-filled"
          style="color:#ED7B2F;margin-bottom:90px"
        >
          <path
            fill="currentColor"
            d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
            fill-opacity="0.9"
          ></path>
        </svg>
      );
    },
    closeBtn(close) {
      return (
        <b class="t-message__close" onClick={close}>
          x
        </b>
      );
    },
    closeMsgDia() {
      this.$message.close(this.warnMsg);
      this.warnMsg = null;
    },
    openApplyDia() {
      this.$bus.$emit('ApplyMsg', {
        value: true,
        type: '1',
      });
      this.$message.close(this.warnMsg);
      this.warnMsg = null;
    },
  },
});
</script>
<style lang="less" scoped>
.t-icon-success {
  margin-left: 10px;
}
.t-message__close {
  margin: 0 0 100px 0 !important;
}
/deep/.t-is-closable .t-is-closable {
  margin: none;
}
/deep/.t-icon .t-icon-error-circle-filled {
  margin-bottom: 100px !important;
}
/deep/.t-message .t-is-warning .t-is-closable {
  background-color: red !important;
}
</style>
